import { GameRules } from '@/services/game/GameController';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Divider, message, Modal, Tag } from 'antd';
import React from 'react';
import services from '@/services/game';
import GameEditRulesFormTypeA from './GameEditRulesFormTypeA';

const { queryPageGameRules, updateGameRulesState } = services.GameController;

const handState = async (rulesId: string, state: number) => {
  const hide = message.loading('正在更新');
  try {
    const { success, errorMessage } = await updateGameRulesState({
      rulesId: rulesId,
      state: state
    });
    hide();
    if (success) {
      message.success('更新成功');
      return true;
    } else {
      message.error(errorMessage);
      return false;
    }
  } catch (error) {
    hide();
    message.error('更新失败请重试！');
    return false;
  }
}

/**
 * 赛制规则设置
 */
interface Props {
  modalVisible: boolean;
  onCancel: (show: boolean) => void;
}

const GameEditRulesForm: React.FC<Props> = (props) => {
  const actionRef = React.useRef<ActionType>();
  const { modalVisible, onCancel } = props;
  const [editVisible, setEditVisible] = React.useState(false)
  const [selectItem, setSelectItem] = React.useState<GameRules>()

  const columns: ProColumns<GameRules>[] = [
    {
      title: '编号',
      dataIndex: 'rulesId',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '赛制',
      dataIndex: 'name',
      valueType: 'text',
    },
    {
      title: '状态',
      dataIndex: 'state',
      hideInForm: true,
      valueEnum: {
        1: { text: '正常' },
        2: { text: '禁用' },
      },
      renderText: (text: any) => {
        return (
          <Tag
            color={
              text === 1
                ? 'green'
                : 'red'
            }
          >
            {
              text === 1
                ? '正常'
                : '禁用'
            }
          </Tag>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setSelectItem(record)
              setEditVisible(true)
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a
            onClick={async () => {
              const success = await handState(record.rulesId, 2)
              if (success) {
                actionRef?.current?.reload()
              }
            }}
          >
            禁用
          </a>
          <Divider type="vertical" />
          <a
            onClick={async () => {
              const success = await handState(record.rulesId, 1)
              if (success) {
                actionRef?.current?.reload()
              }
            }}
          >
            启用
          </a>

        </>
      ),
    },
  ];

  return (
    <Modal
      title="赛制规则设置"
      open={modalVisible}
      onCancel={() => onCancel(false)}
      footer={null}
      width="80%"
      height="80%"
      style={{ padding: 0, top: 10 }}
    >
      <ProTable<GameRules>
        actionRef={actionRef}
        search={false}
        rowKey="rulesId"
        request={async (params) => {
          const { data, success } = await queryPageGameRules({
            ...params
          });
          return {
            data: data?.list || [],
            success,
          };
        }}
        columns={columns}
      />

      {editVisible && <GameEditRulesFormTypeA
        data={selectItem}
        modalVisible={editVisible}
        onCancel={setEditVisible}
        onReloadAndRest={() => {
          actionRef?.current?.reload()
          setEditVisible(false)
        }}
      />}
    </Modal>
  );
};

export default GameEditRulesForm;
